<template>
  <div>
    <van-field
      :value="value"
      readonly
      clickable
      :label="label"
      :placeholder="placeholder"
      right-icon="arrow-down"
      @click="showPopup = true"
    />
    <!--  -->
    <!--  -->

    <van-popup v-model="showPopup" :position="position">
      <van-datetime-picker
        v-model="value2"
        :type="type"
        title="选择"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
      />
    </van-popup>

    <!-- <van-calendar v-model="showPopup" @confirm="onConfirm" /> -->
    <!--
        :min-date="minDate"
        :max-date="maxDate"
 -->
  </div>
</template>

<script>
import { parseTime } from '@/utils'

export default {
  name: 'FieldDatetime',
  props: {
    type: { type: String, default: 'datetime' },
    value: { type: String, default: '' },
    minDate: { type: Date, default: undefined },
    maxDate: { type: Date, default: undefined },
    name: { type: String, default: '' },
    label: { type: String, default: '' },
    placeholder: { type: String, default: '' },
    position: { type: String, default: 'bottom' }
  },

  data() {
    return {
      showPopup: false
    }
  },

  computed: {
    value2: {
      get() {
        return this.value ? new Date(this.value) : new Date()
      },
      set(val) {
        // console.log('val set, ', val)
        // this.$emit('input', parseTime(val, '{y}-{m}-{d}'))
      }
    }
  },

  watch: {},

  async created() {},

  methods: {
    onConfirm(date) {
      const format =
        this.type === 'date' ? '{y}-{m}-{d}' : '{y}-{m}-{d} {h}:{i}:{s}'
      this.$emit('input', parseTime(date, format))
      this.showPopup = false
    }
  }
}
</script>

<style type="text/css"></style>
